<template>
  <div class="app-container" v-loading="listLoading">
    <div class="filter-container">
      <div class="margin-b">
        <el-input
          class="filter-item"
          v-model="listQuery.name"
          clearable
          placeholder="请输入课程名或讲师姓名进行搜索"
          style="width: 250px;"
        ></el-input>
        <el-select
          style="width: 150px;"
          class="filter-item"
          v-model="listQuery.parentCatId"
          clearable
          placeholder="请选择一级分类"
          @change="parentSelect"
        >
          <el-option label="全部" :value="null"></el-option>
          <el-option
            v-for="item in firstSortList"
            :key="item.catId"
            :label="item.name"
            :value="item.catId"
          ></el-option>
        </el-select>
        <el-select
          style="width: 150px;"
          class="filter-item"
          v-model="listQuery.childCatId"
          clearable
          placeholder="请选择二级分类"
          @change="secondSelect"
        >
          <el-option label="全部" :value="null"></el-option>
          <el-option
            v-for="item in secondSortList"
            :key="item.catId"
            :label="item.name"
            :value="item.catId"
          ></el-option>
        </el-select>
        <el-select
          style="width: 150px;"
          class="filter-item"
          v-model="listQuery.childCatIds"
          clearable
          placeholder="请选择三级分类"
        >
          <el-option label="全部" :value="null"></el-option>
          <el-option
            v-for="item in thirdSortList"
            :key="item.catId"
            :label="item.name"
            :value="item.catId"
          ></el-option>
        </el-select>
        <el-select
          style="width: 150px;"
          class="filter-item"
          v-model="listQuery.permission"
          clearable
          placeholder="请选择观看权限"
        >
          <el-option
            v-for="(key, value) in coursePermitOptions"
            :key="key"
            :label="value"
            :value="key"
          ></el-option>
        </el-select>

        <el-button
          type="primary"
          class="search filter-item"
          icon="el-icon-search"
          @click="initList"
        >搜索</el-button>
      </div>
      <el-button type="primary" icon="el-icon-edit" @click="linkToCreate">新建知识单品</el-button>
      <div style="margin-top:20px;">
        <el-table
          :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}"
          :data="tableData"
          element-loading-text="加载中..."
          fit
          highlight-current-row
          class="c-width100 color-222 family-PingFangSC-Regular font-s12"
        >
          <el-table-column align="center" label="名称">
            <template slot-scope="scope">
              <div class="clearfix">
                <div class="fl margin-r">
                  <img
                    :src="scope.row.courseAvatar"
                    height="68"
                    width="102"
                    alt
                    @error="setDefultImg"
                  />
                </div>
                <div class="fl">
                  <div class="c-overflow-h">
                    <p
                      class="fl font-s14 color-222 text-alignL line-limit-length"
                    >{{scope.row.name}}</p>
                    <el-popover
                      class="fl"
                      v-if="scope.row.name.length>12"
                      placement="left"
                      width="400"
                      trigger="hover"
                    >
                      <div>{{scope.row.name}}</div>
                      <i slot="reference" class="el-icon-view c-fc-deepskyblue margin-l10"></i>
                    </el-popover>
                  </div>
                  <div class="c-overflow-h">
                    <p
                      class="fl font-s12 color-999 text-alignL line-limit-length"
                    >讲师：{{scope.row.lecturerName}}</p>
                    <el-popover
                      class="fl font-s12"
                      style="font-size: 12px"
                      v-if="scope.row.lecturerName && scope.row.lecturerName.length>14"
                      placement="left"
                      width="400"
                      trigger="hover"
                    >
                      <div>{{scope.row.lecturerName}}</div>
                      <i slot="reference" class="el-icon-view c-fc-deepskyblue margin-l10"></i>
                    </el-popover>
                  </div>
                  <div class="font-s12 text-alignL">
                    <span class="font-s12 c-fc-blue text-alignL">&yen;{{ scope.row.price }}</span>
                    <span
                      class="font-s12 c-fc-blue text-alignL type"
                    >{{ getOptionName(scope.row.permission,coursePermitOptions) }}</span>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" label="课程分类">
            <template slot-scope="scope">
              <span v-for="(item,index) in scope.row.types" :key="index">
                {{item.name}}
                <font v-if="index<2">/</font>
              </span>
            </template>
          </el-table-column>

          <el-table-column width="100" align="center" label="讲师">
            <template slot-scope="scope">
              <span>{{ scope.row.lecturerName }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" width="80" label="是否热门">
            <template slot-scope="scope">
              <span class="color-222" v-if="scope.row.isHot == 1">是</span>
              <span class="color-222" v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column align="center" width="80" label="是否特价">
            <template slot-scope="scope">
              <span class="color-222" v-if="scope.row.special == 1">是</span>
              <span class="color-222" v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column align="center" width="80" label="是否上架">
            <template slot-scope="scope">
              <span class="color-222" v-if="scope.row.status == 1">是</span>
              <span class="color-222" v-else>否</span>
            </template>
          </el-table-column>

          <el-table-column align="center" width="80" label="(音频/视频)已传">
            <template slot-scope="scope">
              <div v-if="scope.row.catalog==1">
                <span class="color-222" v-if="scope.row.hasVideo">是</span>
                <span class="color-222" v-else>否</span>
              </div>
              <div v-if="scope.row.catalog==0">
                <span class="color-222" v-if="scope.row.hasAudio">是</span>
                <span class="color-222" v-else>否</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="80"
            label="视频已传"
            v-if="listQuery.courseType === 0  "
          >
            <template slot-scope="scope">
              <span class="color-222" v-if="scope.row.hasVideo">是</span>
              <span class="color-222" v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column align="center" width="80" label="音频已传" v-if="listQuery.courseType === 1">
            <template slot-scope="scope">
              <span class="color-222" v-if="scope.row.hasAudio">是</span>
              <span class="color-222" v-else>否</span>
            </template>
          </el-table-column>
          <el-table-column align="center" width="140" label="发布日期">
            <template slot-scope="scope">
              <span class="color-222">{{scope.row.createdAt }}</span>
            </template>
          </el-table-column>

          <el-table-column width="210" align="center" label="操作">
            <template slot-scope="scope">
              <div class="text-alignL">
                <b @click="linkToEdit(scope.row.courseId)">编辑</b>
                <span class="color-409" v-if="scope.row.catalog == 1 || scope.row.catalog == 0">|</span>
                <b
                  @click="linkToDetail(scope.row.courseId, scope.row.catalog)"
                >{{ scope.row.catalog == 1 ?"上传视频" :scope.row.catalog == 0 ?"上传音频" :''}}</b>
                <span class="color-409">|</span>
                <b
                  @click="toLowerShelf(scope.row.status,scope.row.courseId)"
                >{{scope.row.status == 1 ?'下架' :'上架'}}</b>
              </div>
              <div class="text-alignL">
                <b @click="handleDelete(scope.$index, scope.row.courseId)">删除</b>

                <!-- <span class="color-409">|</span> -->

                <!-- <b @click="messagePush(scope.$index)">微信推送</b> -->

                <span class="color-409">|</span>
                <el-dropdown>
                  <span class="el-dropdown-link">
                    更多
                    <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown" style="padding:10px">
                    <!-- <b style="padding:20px" @click="linkToCourseComment(scope.row.courseId)">课程评论</b> -->
                    <b @click="showMessageModel(scope.row)">消息推送</b>
                    <span class="color-409">|</span>
                    <b v-if="scope.row.isHot == 1" @click="setHotCourse(1,scope.row)">下热门</b>
                    <b v-else @click="setHotCourse(1,scope.row)">上热门</b>
                    <span class="color-409">|</span>
                    <b v-if="scope.row.special == 1" @click="setHotCourse(2,scope.row)">下特价</b>
                    <b v-else @click="setHotCourse(2,scope.row)">上特价</b>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div v-show="!listLoading" class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="listQuery.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="listQuery.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>
    <wechat-push v-if="isShowWechatPush" :courseData="courseData"></wechat-push>
    <el-dialog title="消息推送" :visible.sync="messageModel" width="50%">
      <el-tabs v-model="pushType">
        <el-tab-pane label="平台消息推送" name="platform"></el-tab-pane>
        <el-tab-pane label="微信消息推送" name="wechat"></el-tab-pane>
      </el-tabs>
      <template v-if="pushType == 'platform'">
        <el-form :model="message" ref="message" label-width="100px" class="demo-ruleForm">
          <el-form-item label="消息标题" prop="messageTile">
            <el-input v-model="message.messageTile"></el-input>
          </el-form-item>
          <el-form-item label="标题内容" prop="messageDesc">
            <el-input type="textarea" v-model="message.messageDesc"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="messageModel = false">取 消</el-button>
          <el-button type="primary" @click="pushMessage('message')">确 定</el-button>
        </span>
      </template>

      <template v-if="pushType == 'wechat'">
        <el-form :model="wechatMessage" label-width="100px" class="demo-ruleForm">
          <el-form-item label="通知描述">
            <el-input v-model="wechatMessage.first"></el-input>
          </el-form-item>
          <el-form-item label="课程名称">
            <el-input type="textarea" v-model="wechatMessage.keyword1"></el-input>
          </el-form-item>
          <el-form-item label="地点位置">
            <el-input type="textarea" v-model="wechatMessage.keyword2"></el-input>
          </el-form-item>
          <el-form-item label="讲师名称">
            <el-input type="textarea" v-model="wechatMessage.keyword3"></el-input>
          </el-form-item>
          <el-form-item label="直播时间">
            <el-input type="textarea" v-model="wechatMessage.keyword4"></el-input>
          </el-form-item>
          <el-form-item label="备注内容">
            <el-input type="textarea" v-model="wechatMessage.remark"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="messageModel = false">取 消</el-button>
          <el-button type="primary" @click="pushWechatMessage()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import {
  createCourse,
  getCourseList,
  getPermissionOptions,
  UpdateStatus,
  pushMessage,
  deleteCourse
} from "@/api/course";
import { getParentCategories, getChildCategories } from "@/api/courseCategory";
import { delVideos } from "@/api/courseDetail";

import defultImg from "@/assets/defult270.png";
import wechatPush from "../courses/components/wechatPush.vue";
import { getVideoPlatformType } from "@/api/company";
import { LivePreheat } from "@/api/member";
export default {
  data() {
    return {
      defultImg,
      isShowWechatPush: false,
      listQuery: {
        parentCatId: null,
        childCatId: null,
        childCatIds: null,
        name: "",
        permission: null,
        page: 1,
        limit: 10
      },
      pushType: "platform",
      message: {
        messageTile: "",
        messageDesc: "",
        typeId: "",
        messageTypeStatus: 1,
        messageTypes: 0
      },
      wechatMessage: {
        first: "",
        keyword1: "",
        keyword2: "",
        keyword3: "",
        keyword4: "",
        remark: "",
        link: "",
        type: 3 //1直播预热2直播提醒
      },
      courseData: [],
      firstSortList: [],
      secondSortList: [],
      coursePermitOptions: [], // 观看权限
      thirdSortList: [],
      messageModel: false,
      listLoading: false,
      tableData: [],
      total: null
    };
  },
  created() {
    this.initOption();
    this.initList();
  },
  methods: {
    pushWechatMessage() {
      LivePreheat(this.wechatMessage).then(res => {
        this.$message(res.data.data);
      });
    },
    handleDelete(index, id) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.listLoading = true;
          deleteCourse(id)
            .then(res => {
              if (res.data.statusCode == 200) {
                this.listLoading = false;
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
                this.tableData.splice(index, 1);

                // 删除该课程下的所有视频
                delVideos(id);
              } else {
                this.listLoading = false;
                this.$message({
                  type: "error",
                  message: "删除失败!"
                });
              }
            })
            .catch(err => {
              this.listLoading = false;
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    async setHotCourse(type, item) {
      var data = {};
      if (type == 1) {
        var ishot = item.isHot == 1 ? -1 : 1;
        data = {
          isHot: ishot,
          courseId: item.courseId
        };
      } else {
        var isspecial = item.special == 1 ? -1 : 1;
        data = {
          special: isspecial,
          courseId: item.courseId
        };
      }

      await UpdateStatus(data).then(res => {
        this.$message({
          type: "success",
          message: res.data.data
        });
      });
      await this.initList();
    },
    linkToEdit(id) {
      const type = this.$route.name;
      this.$router.push({
        name: "editCourse",
        query: {
          courseType: type,
          courseId: id
        }
      });
    },
    handleSizeChange(val) {
      this.listQuery.limit = val;
      this.initList();
    },
    handleCurrentChange(val) {
      this.listQuery.page = val;
      this.initList();
    },
    pushMessage(formName) {
      if (this.message.messageTile == "") {
        this.$message("请填写消息标题");
        return;
      }
      if (this.message.messageDesc == "") {
        this.$message("请填写消息描述");
        return;
      }
      pushMessage(this.message).then(res => {
        this.$message(res.data.data);
        this.messageModel = false;
      });
    },
    showMessageModel(item) {
      this.message.typeId = item.courseId;
      this.wechatMessage.link =
        "homePage/course/courseDetail?courseId=" + item.courseId;
      this.messageModel = true;
    },
    hideWechatPush(msg) {
      this.isShowWechatPush = msg;
    },
    messagePush(index) {
      this.isShowWechatPush = true;
      this.courseData = this.tableData[index];
    },
    linkToDetail(id, type) {
      if (type == 1) {
        getVideoPlatformType().then(res => {
          if (res.data.data[0].videoPlatformType == 1) {
            this.$router.push({
              name: "uploadVideo",
              params: { courseId: id }
            });
          } else {
            this.$router.push({
              name: "uploadVideoLeShi",
              params: { courseId: id }
            });
          }
        });
      } else if (type == 0) {
        this.$router.push({ name: "uploadAudio", params: { courseId: id } });
      }
    },
    async toLowerShelf(val, id) {
      var status = "";
      if (val == 1) {
        status = -2;
      } else {
        status = 1;
      }
      await UpdateStatus({ status: status, courseId: id }).then(res => {
        this.$message({
          message: "操作成功",
          type: "success"
        });
      });
      await this.initList();
    },
    linkToCreate() {
      this.$router.push({ name: "createCourse" });
    },
    getOptionName(id, data) {
      let name = "";
      for (const item in data) {
        if (data[item] == id) {
          name = item;
          break;
        }
      }
      return name;
    },
    initList() {
      this.listLoading = true;
      getCourseList(this.listQuery).then(res => {
        this.tableData = res.data.data.list.data;
        this.total = res.data.data.list.total;
        // this.courseUrl = res.data.data.url;
        this.listLoading = false;
      });
    },

    initOption() {
      getParentCategories().then(res => {
        this.firstSortList = res.data.data;
      });
      getPermissionOptions().then(res => {
        this.coursePermitOptions = res.data.data;
      });
    },
    secondSelect() {
      this.listQuery.childCatIds = null;
      getChildCategories(this.listQuery.childCatId).then(res => {
        this.thirdSortList = res.data.data;
      });
    },
    parentSelect(id) {
      this.listQuery.childCatId = null;
      this.listQuery.childCatIds = null;
      getChildCategories(id)
        .then(res => {
          this.secondSortList = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    setDefultImg(e) {
      e.target.src = defultImg;
    }
  },
  components: { wechatPush },
  watch: {}
};
</script>

<style scoped>
.isFree {
  height: 17px;
  line-height: 17px;
  border-radius: 3px;
  border: 1px solid #409eff;
  margin-left: 5px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
